<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- DataTables -->
    <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="./plugins/datatables-responsive/css/responsive.bootstrap4.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="./css/adminlte.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" href="index.html">
                    <i class="fa fa-paper-plane"></i>
                    <span>博客前台首页</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <h1>
            <a href="index.html" class="brand-link">
                <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">俊俊博客</span>
            </a>
        </h1>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">仪表盘</li>
                    <li class="nav-item">
                        <a href="dashboard.html" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>仪表盘</p>
                        </a>
                    </li>
                    <li class="nav-header">博客编辑</li>
                    <li class="nav-item">
                        <a href="edit.html" class="nav-link">
                            <i class="nav-icon fas fa-edit"></i>
                            <p>发布博客</p>
                        </a>
                    </li>
                    <li class="nav-header">管理模块</li>
                    <li class="nav-item">
                        <a href="ztshares-mgr.html" class="nav-link active">
                            <i class="fa fa-list-alt nav-icon" aria-hidden="true"></i>
                            <p>今日涨停列表</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="category-mgr.html" class="nav-link">
                            <i class="fa fa-bookmark nav-icon" aria-hidden="true"></i>
                            <p>分类管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="tag-mgr.html" class="nav-link">
                            <i class="fa fa-tags nav-icon" aria-hidden="true"></i>
                            <p>标签管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="record-list.html" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            <p>操作记录</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="share-mgr.html" class="nav-link">
                            <i class="fa fa-comments nav-icon" aria-hidden="true"></i>
                            <p>股票管理</p>
                        </a>
                    </li>
                    <li class="nav-header">系统管理</li>
                    <li class="nav-item">
                        <a href="configuration.html"
                           class="nav-link">
                            <i class="fa fa-wrench nav-icon"></i>
                            <p>系统配置</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fa fa-sign-out-alt nav-icon"></i>
                            <p>安全退出</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-teal card-outline">
                            <div class="card-header">
                                <h3 class="card-title">列表</h3>
                            </div>

                            <div class="card-body">
                                <div>
                                    <div id="toolbar">
                                        <button class="btn btn-default">添加</button>
                                        <button class="btn btn-default">修改</button>
                                        <button class="btn btn-default">删除</button>
<!--                                        <button class="btn btn-default">批量导入</button>-->
                                        <button type="button" class="btn btn-default" data-toggle="modal"
                                                data-target="#myModal" title="批量导入" id="upload">
                                            <i class="fa fa-ban"></i> 批量导入
                                        </button>
                                    </div>
                                </div>
                                <div id="myModal" class="modal fade" role="dialog">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title">批量导入</h4>
                                            </div>

                                            <div class="modal-body">
                                                <form enctype="multipart/form-data">
                                                    <div class="form-group">
                                                        <input id="file-1" type="file" name="excelFile" class="file" data-overwrite-initial="false"
                                                               data-min-file-count="1">
                                                    </div>
                                                </form>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                                                    <button type="button" class="btn btn-outline" data-dismiss="modal">保存</button>
                                                </div>

                                            </div>

                                        </div>
                                        <!-- /.modal-content -->
                                    </div>

                                    <!-- /.modal-dialog -->
                                </div>
                                <table class="table table-bordered table-hover text-nowrap" id="dataShow" data-search="true"/>
                            </div>
                            <hr class="m-0">
                            <!-- /.card-header -->
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>

            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- DataTables -->
<script src="./plugins/datatables/jquery.dataTables.min.js"></script>
<script src="./plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="./plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="./plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

<link rel="stylesheet" href="./plugins/jquery/upload/css/fileinput.css">
<script type="text/javascript" src="./plugins/jquery/upload/js/fileinput.js"></script>
<script type="text/javascript" src="./plugins/jquery/upload/js/locales/zh.js"></script>

<!-- AdminLTE App -->
<!--<link rel="stylesheet" href="../css/bootstrap.min.css" />-->
<link rel="stylesheet" href="/plugins/bootstrap-table/bootstrap-table.css" />
<script src="./js/adminlte.min.js"></script>
<script src="/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script>
    $(function () {
        //开始装载数据
        $("#dataShow").bootstrapTable({
            url: "/trade/getAll",
            sortName: "shareName",//排序列
            striped: true,//條紋行
            toolbar:'#toolbar',
            // toolbarAlign:'right',
            sidePagination: "client",//服务器分页
            showRefresh: false,//刷新功能
            clickToSelect: false,//选择行即选择checkbox
            singleSelect: true,//仅允许单选
            pagination: true,//启用分页
            pageCount: 10,//每页行数
            pageIndex: 0,//起始页
            pageList: [10, 25, 50, 100],//可供选择的每页的行数
            escape: true,//过滤危险字符
            queryParams: getParams,//携带参数
            dataType: "json",
            columns: [
                {
                    title: '名称',
                    field: 'shareName',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '代码',
                    field: 'shareCode',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '价格',
                    field: 'price',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '所属行业',
                    field: 'industryId',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    title: '换手率',
                    field: 'attribute1',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return value + "%";
                    }
                },
                {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<a href="#" mce_href="#" onclick="reserve(\'' + row.id + '\')">编辑</a> ';
                    }
                }
            ],
            onLoadSuccess: function (ee) {
                //查询数据成功
                console.info(ee);

            }
        });
    });

    //默认加载时携带参数
    function getParams(parm) {
        return {page: (parm.offset / parm.limit) + 1, rows: 10};
    }

    //预约功能
    function reserve(parm) {
        alert("进行预约操作！");
    }

    initFileInput("/trade/import");

    function initFileInput(uploadUrl) {
        var control = $("#file-1");
        control.fileinput({
            language: 'zh',
            uploadUrl: uploadUrl, // 上传你的地址
            uploadAsync: true, //默认异步上传
            showCaption: true,//是否显示标题
            allowedFileExtensions: ['xls', 'xlsx'],//接收文件的后缀
            showUpload: true,//是否显示上传按钮
            overwriteInitial: false,
            enctype: 'multipart/form-data',
            showPreview: true,
            browseClass: "btn btn-primary", //按钮样式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            maxFileSize: 15000,
            maxFilesNum: 10,
            layoutTemplates: {
                actionDelete: "",//去除上传预览缩略图中的删除按钮的缩略图标。
                actionUpload: "", //去除上传预览缩略图中的上传按钮的缩略图标。
                actionZoom: ""   //去除上传预览缩略图中的查看详情预览的缩略图标。
            },
            //allowedFileTypes: ['image', 'video', 'flash'],
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        }).on("filebatchselected", function (event, files) {
            console.log(event);
            console.log(files);

        }).on("fileuploaded", function (event, data, previewId, index) {
            if (data.response) {
                alert('上传完成!本次上传行数[ ' + (data.response.code) + " ]");
                setTimeout(function () {
                    $('#myModal').modal('hide');
                }, 1000)

            }
        }).on("fileerror", function (event, data, msg) {
            console.log(event);
            console.log(data);
            console.log(msg);
            alert("上传失败了！");
        });
    }
</script>

</body>
</html>
